import React, {FC, useContext} from 'react';
import "./HxArticleSpecialItem.less";
import classNames from "classnames";
import defaultCover from "@/assets/default_art_cover.png"
import {Flex, Image} from "antd";
import {Link} from "umi";
import * as API from "@/services";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {correspVal, getArticleLocationStr} from "@/utils/biz";

interface HxArticleSpecialItemProps {
  className?: string;
  showCover?: boolean;
  article?: API.FrontArticle;
}

const HxArticleSpecialItem: FC<HxArticleSpecialItemProps> = (props) => {
  const {showCover = true, article, className} = props;
  const {isZhCN} = useContext(HxConfigContext)

  const detailPath = `/journal/${article?.journal?.id || article?.journalId}/article/${article?.id}`;
  return (
    <div className={classNames("hx-article-special-item-container", className)}>
      {showCover && (
        <Link to={detailPath} className="hx-article-special-item-cover">
          <Image src={article?.articleImageUrl} fallback={defaultCover} alt="" preview={false}/>
        </Link>
      )}
      <div className={"hx-article-special-item-body"}>
        <Link to={detailPath} className={"hx-article-special-item-title"}
              dangerouslySetInnerHTML={{__html: correspVal(isZhCN, article?.articleTitleCn, article?.articleTitleEn) || ""}}>
        </Link>
        <div className={"hx-article-special-item-content"}>
          <Flex vertical={true} gap={6}>
            <Flex vertical={false}>
              {correspVal(isZhCN, article?.journal?.journalNameCn || article?.journalNameCn, article?.journal?.journalNameEn || article?.journalNameEn)}
            </Flex>
            <Flex vertical={false}>
              {getArticleLocationStr(article)}
            </Flex>
          </Flex>
        </div>
      </div>
    </div>
  );
};

export default HxArticleSpecialItem;
